<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./icon/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="./alibaba/iconfont/iconfont.css" />
    <link rel="stylesheet" href="./less/css/carDateaisl.css" />
    <title>Document</title>
    <script src="./vue/js/vue.js"></script>
    <script src="./axios/axios.js"></script>
</head>
<body>
    <div id="carDateails">
        <div id="carDateaisl_box1">
            <div class="carDateaisl_box1_content col-xs-12">
                <div class="carDateaisl_box1_content_span1 col-xs-2" @click="td">
                    <span class="icon iconfont icon-back text-center"></span>
                </div>
                <div class="carDateaisl_box1_content_span2 col-xs-2 col-xs-push-6">
                    <span class="icon iconfont icon-fenxiang text-center"></span>
                </div>
                <div class="carDateaisl_box1_content_span3 col-xs-2 col-xs-offset-6">
                    <span class="icon iconfont icon-xiaoxi text-center"></span>
                </div>
            </div>
        </div>
        <div id="carDateaisl_box2">
            <div class="carDateaisl_box2_top">
                <img :src="thumb_img" width="100%" />
            </div>
            <div class="carDateaisl_box2_bottom">
                <div class="carDateaisl_box2_bottom_box1">
                    <div class="container">
                        <h5>{{title}}</h5>
                    </div>
                </div>
                <div class="carDateaisl_box2_bottom_box2 container">
                    <div>
                        {{tagContent[tagResultForIndex[0]]}}
                    </div>
                    <div>
                        {{tagContent[tagResultForIndex[1]]}}
                    </div>
                </div>
                <div class="carDateaisl_box2_bottom_box3">
                    <span class="col-xs-5">
                        <span class="so1 gzfont" v-html="carCNY">12.36</span>
                        <!-- <span class="so2">万</span> -->
                    </span>
                    <span class="so3">
                        <span style="visibility: hidden;">月供：</span>
                        <span style="display: none;">22035元</span>
                        <span >首付：</span>
                        <span class="gzfont" v-html="first_pay" ></span>
                    </span>
                </div>
            </div>
        </div>
        <div id="carDateaisl_box3">
            <h4 class="carDateaisl_box3_title container">车辆档案</h4>
            <div class="carDateaisl_box3_content">
                <div class="box" >
                    <span>{{license_date}}上牌</span>
                    <h4>{{(new Date()).getFullYear() - parseInt(license_date)}}年</和>
                </div>
                <div class="box">
                    <span>表量里程</span>
                    <h4 class="gzfont" v-html="road_haul"></和>
                </div>
                <div class="box">
                    <span>品牌</span>
                    <h4>{{title.split(' ')[0]}}</和>
                </div>
            </div>
            <div class="carDateaisl_box3_content">
                <div class="box">
                    <span>车系</span>
                    <h4>{{title.split(' ')[1]}}</和>
                </div>
                <div class="box">
                    <span style="visibility: hidden;">车系</span>
                    <h4>{{title.split(' ')[2]}}</和>
                </div>
                <div class="box">
                    <span>提车时间</span>
                    <h4>{{Math.floor(Math.random() * 10) + 1}}天</和>
                </div>
            </div>
        </div>
        <div id="carDateaisl_box4">
            <h4 class="container">购车服务</h4>
            <div class="carDateaisl_box4_content">
                <div class="box">
                    <span class="icon iconfont icon-duigou"></span>
                    <b>真实车况保障：</b>
                    <span>免费理赔记录|在线验车|免费平台复检</span>
                </div>
                <div class="box">
                    <span class="icon iconfont icon-duigou"></span>
                    <b>交易保障：</b>
                    <span>七天无理由退车|平台居间保障</span>
                </div>
                <div class="box">
                    <span class="icon iconfont icon-duigou"></span>
                    <b>售后保障：</b>
                    <span>30天全面保修|重大事故火烧泡水终身包退</span>
                </div>
            </div>
        </div>
        <div id="carDateaisl_box5">
            <div class="carDateaisl_box5_content">
                <div class="carDateaisl_box5_content_box1 text-center">
                    <span class="icon iconfont icon-PK"></span>
                    <div class="text-center">对比</div>
                </div>
                <div class="carDateaisl_box5_content_box1 text-center">
                    <span class="icon iconfont icon-shoucang"></span>
                    <div class="text-center">收藏</div>
                </div>
                <div class="carDateaisl_box5_content_box2 text-center">
                    <div class="text-center">电话咨询</div>
                </div>
                <div class="carDateaisl_box5_content_box3 text-center">
                    <div class="text-center">在线咨询</div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        new Vue({
            el:'#carDateails',
            data(){
                return{
                    tt:'123',
                    clue_id:'',
                    puid:'',
                    thumb_img:'',
                    title:'',
                    carCount:'',
                    carCNY:'',
                    first_pay:'',
                    rmb_price:'',
                    license_date:'',
                    road_haul:'',
                    tagContent:['自适应巡航','车道偏离预警','全液晶仪表盘','全景天窗','自动泊车','前雷达','自动驻车','自动头灯','无钥匙启动'],
                    tagResultForIndex:[],
                }
            },
            methods:{
                td(){
                    if (window.frames.length != parent.frames.length) {
                        console.log('有父级页面');
                        window.history.back()
                    }else{
                        console.log('无父级页面')
                        window.location.href='./index.html'
                    }
                },
            },
            mounted(){
                let url = window.location.href
                //截取 url中的“=”,获得“=”后面的参数 
                let urlTxt = url.split("=");  
                //解码url 
                let puuid = decodeURI(urlTxt [1]).split('&')[0]; //decodeURI解码  
                // console.log(puuid)
                let jsonid = urlTxt[2]
                // console.log(jsonid)
                if(jsonid === '0-0'){
                    jsonUrl = './json/data/0-0.json'
                }
                axios.get(jsonUrl).then(response=>{
                    response.data['data']['postList'].map((item)=>{
                        // console.log(item)
                        if(puuid == item.puid){
                            this.clue_id=item.clue_id,
                            this.puid=item.puid,
                            this.thumb_img=item.thumb_img,
                            this.title=item.title,
                            this.carCount=4.08,
                            this.carCNY=item.price,
                            this.first_pay=item.first_pay,
                            this.rmb_price=JSON.parse(item.service_tracking_info)['price'],
                            this.license_date=item.license_date,
                            this.road_haul = item.road_haul
                        }
                        // console.log(item.title.split(' ')[0])
                    })
                })
                // console.log(this._data)
                var result = [];
                while (result.length < 2) { // 控制随机数的数量
                    var randomNumber = Math.floor(Math.random() * 9); // 生成0-8之间的随机整数
                    if (result.indexOf(randomNumber) === -1) { // 如果生成的随机数不在数组中，就添加到数组中
                        result.push(randomNumber);
                        this.tagResultForIndex.push(randomNumber)
                    }
                }
                // console.log(result)
            }
        })
    </script>
</body>
</html>